<template>
  <div class="tmpl">

<div class="login_box">
    <div class="login_img">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506078163013&di=2346d2a183f3e6c4dabea7fed7c6b5f7&imgtype=0&src=http%3A%2F%2Fimg.52jbj.com%2Fd%2Ffile%2F170119%2F1-eqc3jdt4txu.jpg" alt="">
    </div>
     <div class="login-wrap" v-show="showLogin">
                <h3>登录</h3>
                <!-- <p v-show="showTishi">{{tishi}}</p> -->
                <input type="text" placeholder="请输入用户名" v-model="username">
                <input type="password" placeholder="请输入密码" v-model="password">
                <button v-on:click="login">登录</button>
                <span v-on:click="ToRegister">没有账号？马上注册</span>
            </div>

            <div class="register-wrap" v-show="showRegister" >
                <h3>注册</h3>
                <!-- <p v-show="showTishi">{{tishi}}</p> -->
                <input type="text" placeholder="请输入用户名" v-model="newUsername">
                <input type="password" placeholder="请输入密码" v-model="newPassword">
                <button v-on:click="register">注册</button>
                <span v-on:click="ToLogin">已有账号？马上登录</span>
            </div>
</div>


  </div>
</template>

<script>

import {setCookie} from '../../kits/cookie.js';
export default {
 		data(){
 			 return{
                showLogin: true,
                showRegister: false,
                showTishi: false,
                tishi: '',
                username: '',
                password: '',
                newUsername: '',
                newPassword: ''
            }
		 },methods:{
          ToRegister(){
                this.showRegister = true
                this.showLogin = false
            },
            ToLogin(){
                this.showRegister = false
                this.showLogin = true
            },
                login(){
                        if(this.username == "" || this.password == ""){
                            alert("请输入用户名或密码")
                        }else{
                            let url = "";
                            let data = {'username':this.username,'password':this.password}
                            /*接口请求*/
                            this.$http.post('url',data).then((res)=>{
                                console.log(res)
                            /*接口的传值是(-1,该用户不存在),(0,密码错误)，同时还会检测管理员账号的值*/
                            if(res.data == -1){
                                this.tishi = "该用户不存在"
                                this.showTishi = true
                            }else if(res.data == 0){
                                this.tishi = "密码输入错误"
                                this.showTishi = true
                            }else if(res.data == 'admin'){
                            /*路由跳转this.$router.push*/
                                this.$router.push('/main')
                            }else{
                                this.tishi = "登录成功"
                                this.showTishi = true
                                setCookie('username',this.username,1000*60)
                                setTimeout(function(){
                                    this.$router.push('/home')
                                }.bind(this),1000)
                            }
                        })
                    }
                    },
register(){
    if(this.newUsername == "" || this.newPassword == ""){
        alert("请输入用户名或密码")
    }else{
        let url = "";
        let data = {'username':this.newUsername,'password':this.newPassword}
        this.$http.post('url',data).then((res)=>{
            console.log(res)
            if(res.data == "ok"){
                this.tishi = "注册成功"
                this.showTishi = true
                this.username = ''
                this.password = ''
                 /*注册成功之后再跳回登录页*/
                setTimeout(function(){
                    this.showRegister = false
                    this.showLogin = true
                    this.showTishi = false
                }.bind(this),1000)
            }
        })
    }
}



     }

		 
 		
}
</script>

<style lang="scss" scoped>
 .login_box{
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506078491109&di=7ff84c060386349a78bdc298b9692b13&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F94%2F42%2F65K58PICraz.jpg");
 }
.login_img{
    width: 100px;
    height: 100px;
    margin:82px auto 20px;
}

.login_img img{
    width: 100%;
 
}

  .login-wrap ,.register-wrap {
      text-align:center;
      }
    input
    {
        display:block;
        width:250px;
        height:40px;
        line-height:40px;
        margin:0 auto;
        margin-bottom: 10px;
        outline:none;
        border:1px solid #888;
        padding:10px;
        box-sizing:border-box;
     }
    p{
        color:red;
        }
    button{
        display:block;
        width:250px; height:40px;
        margin:0 auto;
        border:none;
        background-color:#41b883;
        color:#fff;
        font-size:16px;
        margin-bottom:5px;
    }
    span{
        cursor:pointer;
        }
    span:hover{
        color:#41b883;
        }
</style>
